<template>
 <div class="frame">
  <div class="center">
		<svg width="100px" height="100px" viewBox="0 0 100 100">
			<circle class="bg" cx="50" cy="50" r="46"/>
			<circle class="loader" cx="50" cy="50" r="46"/>
		</svg>
  </div>
</div>
</template>

<script lang="ts" setup>
</script>
<style lang="scss" scoped>
$length: 288;

.frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
	overflow: hidden;
  background: #fff;
  color: #fff;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.bg {
	fill: none;
	stroke: rgb(64, 117, 255);
	stroke-width: 4;
}

.loader {
	fill: none;
	stroke: #fff;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: $length;
	animation: line 4s linear infinite, spin 3s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes line {
	0% {
		stroke-dashoffset: ($length * 4);
	}
	100% {
		stroke-dashoffset: ($length * 2);
	}
}

@keyframes spin {
	0% {
		transform: rotate(-90deg) translate3d(0,0,0);
	}
	100% {
		transform: rotate(270deg) translate3d(0,0,0);
	}
}


</style>